<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      事件处理，通过 v-on 指令在元素上绑定事件

        1. 直接在元素上使用内联的事件处理器写法
        <button v-on:click="abcd = '1'">按钮</button>
        <button v-on:click="fn1()">按钮</button>
        2. 提供一个 methods 选项中声明的函数的写法
        <button v-on:click="fn1">按钮</button>

      $event 事件处理器中的一个特殊变量
        1. 绑定的事件如果是原生事件，则它的值是事件对象
        2. 绑定的事件如果是组件内部触发的自定义事件，则它的值为触发这个自定义事件时传递过来的参数。

        1. 在编写事件处理器时，如果没有写括号的话，该 $event 会自动传递给事件处理函数
        2. 在编写事件处理器时，如果有写括号的话，该 $event 不会自动传递，如果需要，得手动传递。
     -->

    <div id="app">
      <!-- fn1 会自动收到 event -->
      <button @click="fn1">按钮1</button>
      <!-- fn2 会受到 undefined -->
      <button @click="fn2()">按钮2</button>
      <!-- 主动将 $event 传递下去，event 就收到的是 $event -->
      <button @click="fn2($event)">按钮3</button>

      <ul>
        <li v-for="item in fruits" :key="item.id">
          <button @click="handleClick(item.id, $event)">{{ item.name }}</button>
        </li>
      </ul>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        // 状态数据、响应式数据
        data: {
          fruits: [
            { id: 1, name: "苹果" },
            { id: 2, name: "香蕉" },
          ],
        },
        methods: {
          fn1(event) {
            console.log("fn1", event);
          },
          fn2(event) {
            console.log("fn2", event);
          },
          handleClick(id, event) {
            console.log("id", id, event);
          },
        },
      });
    </script>
  </body>
</html>
